<template>
    <div :class="`review-total-price ${mode}`">
        <div class="discount-tip"></div>
        <div class="price-and-discount">
            <div class="discount-value" v-if="discount">已优惠 <span class="label">￥</span>{{ discount }}</div>
            <div class="price-value title-color">
                <span class="label">小计</span><span :style="`${fontColor}`"><span class="price-label">￥</span>{{ price }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'ReviewTotalPrice', // 总价
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        discount: [Number, String],
        price: {
            type: [Number, String],
            default: 0,
        },
    },
};
</script>

<style lang="less" scoped>
.review-total-price {
    .flex();
    justify-content: space-between;
    .p-v(@shop-gap-md);
    .p-h(@shop-bag-gap);
    // .shop-border-line-top();
    .mode-white();
    .discount-tip {
        font-size: @shop-font-size;
        color: @tip-color;
        opacity: .7;
    }
    .price-and-discount {
        .flex();
        align-items: center;
        justify-items: center;
        font-family: @font-family-number;
        .discount-value {
            font-size: @shop-font-size;
            color: @tip-color;
            opacity: .7;
            .m-r(@shop-gap-md);
            .label {
                font-size: @shop-font-size;
                .m-r(-3);
            }
        }
        .price-value {
            font-weight: 500;
            color: @text-color;
            font-size: 19px;
            .flex-row-center();
            .price-label {
                .m-r(-3);
                .m-l(@gap);
            }
            .label {
                font-size: @shop-font-size;
                .m-r(-2);
            }
        }
    }
}
</style>
